<template>
  <div class="m-detailTabsCard">
    <el-tabs v-model="activeTab" type="card" class="tabs-card">
      <el-tab-pane label="跟进项" name="a">
        <div class="tabContentWarp">
          <div class="m-dataLayout">
            <div class="m-leadTabFrom m-dialog">
              <el-form :model="upLoadRowData.form" :inline="true" ref="refUpLoadRowDataForm" :rules="upLoadRowData.rules">
                <div>
                  <div>
                    <el-form-item label="单号" prop="id">
                      <el-input v-model="upLoadRowData.form.id" placeholder="请输入" disabled></el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="主题" prop="theme">
                      <el-input v-model="upLoadRowData.form.theme" placeholder="请输入" disabled></el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="主题描述">
                      <el-input
                        type="textarea"
                        clearable :disabled="!isEdit"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="不多于100个字"
                        v-model="upLoadRowData.form.themeDesc">
                      </el-input>
                    </el-form-item>
                  </div>
                  <div class="flex row-towItem">
                    <div>
                      <el-form-item label="名单类型" prop="type">
                        <el-select v-model="upLoadRowData.form.type" placeholder="请选择" disabled>
                          <el-option label="LEAD" :value="2"></el-option>
                          <el-option label="真实账号" :value="1"></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="名单" prop="typeId">
                        <el-input v-model="upLoadRowData.form.typeId" placeholder="请输入" disabled></el-input>
                      </el-form-item>
                    </div>
                  </div>
                </div>
                <div>
                  <el-form-item label="处理状态" prop="hstatus">
                    <el-select v-model="upLoadRowData.form.hstatus" placeholder="请选择" :clearable="isEdit" :disabled="!isEdit">
                      <el-option label="待处理" :value="1"></el-option>
                      <el-option label="处理中" :value="2"></el-option>
                      <el-option label="已完成" :value="3"></el-option>
                      <el-option label="无效" :value="4"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="预约时间" prop="resvTimeStr">
                    <el-date-picker
                      v-model="upLoadRowData.form.resvTimeStr"
                      clearable :disabled="!isEdit || upLoadRowData.form.hstatus =='3' || upLoadRowData.form.hstatus =='4'"
                      format="yyyy-MM-dd HH:mm:ss"
                      :editable="false"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetime"
                      placeholder="请选择">
                    </el-date-picker>
                  </el-form-item>
                </div>
                <div class="flex row-towItem">
                  <div>
                    <el-form-item label="预约提醒" prop="resvSndTimeStr">
                      <el-select v-model="upLoadRowData.form.during" placeholder="请选择" :clearable="isEdit" :disabled="!isEdit || upLoadRowData.form.hstatus=='3' || upLoadRowData.form.hstatus=='4'">
                        <el-option label="5分钟前" value="5"></el-option>
                        <el-option label="10分钟前" value="10"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <div>


                    <el-form-item label="分配给"  prop="assigner">
                      <el-select
                        :disabled="!isEdit"
                        :clearable="isEdit"
                        v-model="upLoadRowData.form.assigner"
                        filterable
                        remote
                        reserve-keyword
                        :remote-method="remoteUserMethod"
                        placeholder="请输入关键词"
                      >
                        <el-option
                          v-for="item in userList"
                          :label="item._id"
                          :key="item._id"
                          :value="item._id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
                <div>
                  <el-form-item label="标记">
                    <el-select v-model="showLabel" multiple placeholder="请选择" disabled>
                      <el-option v-for="item in showLabel" :label="item" :value="item" :key="item"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="activeBtns" v-if="isEdit">
                  <el-button plain @click="$router.go(-1)">取消</el-button>
                  <el-button type="primary" @click="submit">更新</el-button>
                </div>
              </el-form>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="跟进详情" name="b">
        <div class="tabContentWarp">
          <div class="m-LeadTabTable m-dataLayout">
            <div class="m-searchListPanel">
              <div class="layout-1"><span class="leftLine"></span>信息列表</div>
              <div class="layout-2" v-if="isEdit">
                <el-button type="primary" icon="el-icon-edit" @click="addRowData.show = true">新建</el-button>
              </div>
            </div>
            <div class="m-dataList">
              <el-table
                :data="dataList"
                style="width: 100%"
                :max-height="800"
              >
                <el-table-column
                  prop="followDetail"
                  width="200"
                  label="跟进情况">
                </el-table-column>
                <el-table-column
                  prop="followDetailDesc"
                  label="跟进描述">
                </el-table-column>
                <el-table-column
                  prop="createUser"
                  label="创建人"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  label="创建时间"
                  width="160">
                </el-table-column>
              </el-table>
            </div>
            <div class="m-pagination">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes=pagination.pageSizeList
                :current-page=pagination.pageNo
                :page-size=pagination.pageSize
                layout="total, sizes, prev, pager, next"
                :total=pagination.total>
              </el-pagination>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="创建跟进项" :visible.sync="addRowData.show" width="400px" class="m-dialog"
               :close-on-click-modal="false" :close-on-press-escape="false" @close="clearAddDialog">
      <el-form :model="addRowData.form" :inline="true" ref="refddRowDataForm" :rules="addRowData.rules">
        <el-form-item label="跟进情况" prop="followDetail">
          <el-input v-model="addRowData.form.followDetail" clearable placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="跟进描述" prop="followDetailDesc">
          <el-input type="textarea" v-model="addRowData.form.followDetailDesc" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addRowData.show = false">取消</el-button>
        <el-button type="primary" @click="addRowDataSubmit">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import * as FollowUpAPI from '@/Api/followup';
  import * as UserAPI from '@/Api/user'
  import * as Utils from '@/utils'
  export default {
    name: 'FollowUpDetails',
    data () {
      return {
        activeTab:'a',
        pagination: Utils.commonPagination(),
        upLoadRowData:{
          form:{},
          rules:{
            themeDesc:[
              {required: true, trigger: 'blur', message: '内容不能为空'},
              {max: 200, trigger: 'blur', message: '长度不能大于200个字符'}
            ],
            type:[
              {required: true, trigger: 'blur', message: '请选择'},
            ],
          }
        },
        showLabel:[],
        userList:[],
        copyForm:null,
        dataList: [],
        addRowData:{
            show:false,
            form:{
              followDetail:'',
              followDetailDesc:'',
            },
            rules:{
              followDetail:[
                {required: true, trigger: 'blur', message: '内容不能为空'},
              ]
            }
        }
      }
    },
    computed:{
      isEdit(){
        if(this.$route.query.type && this.$route.query.type == 'edit') {
          return true;
        } else  {
          return false;
        }
      }
    },
    methods:{
      getRowData() {
        FollowUpAPI.followInfo({id:this.$route.query.id})
          .then(res=>{
            if(res.code != 0) {
              this.$notify.warning({
                title: '温馨提示',
                message: res.msg
              })
              return;
            }
            this.upLoadRowData.form = res.data;
            this.copyForm = Object.assign({},res.data);
            if(res.data.labels && res.data.labels.length>0) {
              let _arr = [];
              res.data.labels.split(',').forEach(item =>{
                _arr.push(item.split('|')[1]);
              })
              this.showLabel = _arr;
            }
          })
          .catch(error=>{
            console.log(error)
          })
      },
      remoteUserMethod(queryStr) {
        if (queryStr != '') {
          UserAPI.userNickname({
            input: queryStr
          })
            .then(res => {
              if (res.code != '0') {
                this.$notify({
                  title: '温馨提示',
                  message: res.msg,
                  type: 'warn'
                })
                return;
              }
              this.userList = res.data;
            })
            .catch(error => {
              console.log(error)
            })
        }

      },
      handleSizeChange(size) {
        this.pagination.pageSize = size;
        if(this.pagination.pageNo == 1) {
          this.queryList();
        } else {
          this.pagination.pageNo = 1;
        }
      },
      handleCurrentChange(index) {
        this.pagination.pageNo = index;
        this.queryList();

      },
      getFollowDetail() {
        FollowUpAPI.followDetailInfo({
          id:this.$route.query.id,
          pageSize: this.pagination.pageSize,
          pageNo: this.pagination.pageNo,
        })
          .then(res=>{
            if(res.code != 0) {
              this.$notify.warning({
                title: '温馨提示',
                message: res.msg
              })
              return;
            }
            this.pagination.total = res.data.totalElements;
            this.dataList = res.data.content;
          })
          .catch(error=>{
            console.log(error)
          })
      },
      submit(){
        this.$refs.refUpLoadRowDataForm.validate(flg => {
          if (!flg) {
            return;
          }
          FollowUpAPI.followEdit(Object.assign(Utils.updateFormItemCopy(this.copyForm),this.upLoadRowData.form))
            .then(res=>{
              if(res.code != 0) {
                this.$notify.warning({
                  title: '温馨提示',
                  message: res.msg
                })
                return;
              }
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.getRowData();
            })
            .catch(error=>{
              console.log(error)
            })
        })
      },
      addRowDataSubmit() {
        this.$refs.refddRowDataForm.validate(flg => {
          if (!flg) {
            return;
          }
        })
        FollowUpAPI.followDetailEdit(Object.assign(this.addRowData.form,{
          id:this.$route.query.id
        }))
          .then(res=>{
            if(res.code != 0) {
              this.$notify.warning({
                title: '温馨提示',
                message: res.msg
              })
              return;
            }
            this.addRowData.show = false;
            this.getFollowDetail();
          })
          .catch(error=>{
            console.log(error)
          })
      },
      clearAddDialog(){
        this.$refs.refddRowDataForm.resetFields();
      }
    },
    created(){
      this.getRowData();
      this.getFollowDetail();
    }
  }
</script>

<style scoped lang="scss">
  @import "../../scss/variables";
  .tabContentWarp {
    padding: $pagePadding;
    padding-top: 14px;
    height: 100%;
  }
  .m-dataLayout {
    min-height: 100%;
  }
</style>
